<template>
  <div id="await-animation-set">
    <common
    :loading='loading'
    :searchShopName='searchShopName'
    :tableData='tableData'
    :pageObj='pageObj'
    :tableHeight='tableHeight'
    @changeStore='changeStore'
    @changePageSize='changePageSize'
    @changePageIndex='changePageIndex'
    @viewHistory='viewHistory(arguments)'
    @allSet='allSet'
    @skipSlit='skipSlit(arguments)'></common>
    <!-- 批量设置 -->
    <select-shop :checkdList="checkdList" :titleObj='titleObj'
      :dataTree="dataTree"
      :modalShow="modalShow"
      @oncancel="selctshopCancel"
      @selctshop="volumeSet"
      v-if="modalShow"></select-shop>
    <!-- 批量设置二次弹框 -->
    <Modal class="twice-modal-set" width='684'
        v-model="setModalStatus"
        :scrollable='true'
        :transfer='false'
         :closable='true'
         :mask-closable='false'
         @on-cancel="cancelModal"
        title="设置配置项">
        <dl class="animation-set">
          <dd v-for="(item,idx) in animationList" :key='idx'>
            <div class="check-icon" @click="checkMaterial(item)">
              <Icon type="ios-checkmark-circle" style="color:#2D8CF0" size='24' v-if='checkedUrl === item.url' />
              <span style="background: #fff;display:inline-block;width:20px;height:20px;border-radius:50%" v-if='checkedUrl !== item.url'></span>
            </div>
            <div>
              <img :src="item.url" alt="">
            </div>
            <p class="desc">{{item.createTime}}</p>
          </dd>
        </dl>
        <div slot="footer">
          <Row style="margin-bottom:12px">
            <Col>
              <Page :total="animationObj.total"
              :current="animationObj.pageIndex"
              :page-size="animationObj.pageSize"
              :page-size-opts='[12, 24, 36, 48]'
              show-sizer
              show-total
              @on-change='changePageIndexAnimation'
              @on-page-size-change='changePageSizeAnimation' />
            </Col>
          </Row>
          <Button style="margin-right:10px;width:80px" @click="skipPrevious">上一步</Button>
          <Button type="primary" style='width:80px' @click="sureSet">确定</Button>
        </div>
    </Modal>
    <!-- 侧边栏 -->
    <drawer-set
    :checkedUrl ='checkedUrl'
    :isDisabled ='isDisabled'
      :historyStatus='historyStatus'
      :title="title"
      :showType='showType'
      :animationList='animationList'
      :historyData='tableHistoryData'
      :pageObj="historyObj"
      @submit='submit'
      @selectMaterial='selectMaterial'
      @oncolse="drawerSetClose"
      @onChangePageIndex='onChangePageIndex'
      @onChangePageSize='onChangePageSize'></drawer-set>
  </div>
</template>

<script>
import { iterationAnimationList, iterationHistoryList, lookAnimationList, setDicSave, getDicQuery } from '@/api/setting'
import common from '@/view/setting/components/common.vue'
import DrawerSet from '@/view/components/drawer-set/drawer-set.vue'
import SelectShop from '@/view/components/select-machine/select-machine.vue'
import volumeStore from '@/view/setting/components/own-use/volumeStore'
export default {
  name: 'global_setting_page_23',
  mixins: [volumeStore],
  components: {
    DrawerSet, common, SelectShop
  },
  computed: {
    tableHeight () {
      let height = this.tableData.length > 10 ? 520 : 0
      return height
    }
  },
  watch: {
    historyStatus (val) {
      if (!val) {
        this.animationList = []
        this.checkedUrl = ''
        this.historyObj = {
          pageIndex: 1,
          pageSize: 10
        }
      }
    },
    setModalStatus (status) {
      if (!status) {
        this.checkedUrl = ''
        this.animationObj.total = 0
        this.animationObj.pageIndex = 1
        this.animationObj.pageSize = 12
        if (!this.modalShow) {
          this.checkdList = []
          this.dataTree = []
          this.checkedUrl = ''
        }
      }
    }
  },
  data () {
    return {
      isDisabled: false,
      showType: '1', // 2表示历史记录  1表示设置drawer
      loading: true,
      checkedUrl: '',
      flag: false,
      serachShopId: '',
      orgId: '',
      title: '历史记录',
      animationObj: {
        total: 0,
        pageIndex: 1,
        pageSize: 12
      },
      historyStatus: false,
      searchShopName: '',
      animationList: [],
      tableData: [],
      tableHistoryData: []
    }
  },
  methods: {
    volumeSet (val) {
      this.modalShow = false
      this.setModalStatus = true
      this.checkdList = val
      this.gainAnimationList()
    },
    checkMaterial (item) {
      this.animationList.forEach((ele, idx) => {
        if (ele.url === item.url) {
          this.checkedUrl = item.url
        }
      })
    },
    changeStore (name) {
      this.searchShopName = name
      // this.serachShopId = name.value
      this.pageObj.pageIndex = 1
      this.getData()
    },
    changePageIndexAnimation (index) {
      this.animationObj.pageIndex = index
      this.gainAnimationList()
    },
    changePageSizeAnimation (size) {
      this.animationObj.pageSize = size
      this.animationObj.pageIndex = 1
      this.gainAnimationList()
    },
    changePageIndex (index) {
      this.pageObj.pageIndex = index
      this.getData()
    },
    changePageSize (size) {
      this.pageObj.pageSize = size
      this.pageObj.pageIndex = 1
      this.getData()
    },
    onChangePageIndex (index) {
      this.historyObj.pageIndex = index
      if (this.title === '历史记录') {
        this.getHistoryList()
      } else {
        this.getAnmanationList()
      }
    },
    onChangePageSize (size) {
      this.historyObj.pageSize = size
      this.historyObj.pageIndex = 1
      if (this.title === '历史记录') {
        this.getHistoryList()
      } else {
        this.getAnmanationList()
      }
    },
    submit () {
      if (this.checkedUrl) {
        this.isDisabled = true
        setTimeout(() => {
          setDicSave({
            msType: '1',
            merchantId: this.$store.state.user.merchantId,
            swipeReadyPicture: this.checkedUrl,
            shopIds: [this.orgId]
          }).then(res => {
            this.isDisabled = false
            if (res.data.status === 200) {
              this.historyStatus = false
              this.$Message.success('设置成功！')
              this.getData()
            } else {
              this.$Message.error(`${res.data.error}`)
            }
          })
        }, 200)
      } else {
        this.$Message.error('请选择一张待机动画图')
      }
    },
    viewHistory (argument) {
      this.historyStatus = true
      this.orgId = argument[1].orgId
      if (argument[0] === '1') {
        this.title = '待机动画设置'
        this.showType = '1'
        lookAnimationList({
          type: '',
          shopId: this.orgId,
          offset: this.historyObj.pageSize * (this.historyObj.pageIndex - 1),
          limit: this.historyObj.pageSize
        }).then(res => {
          if (res.data.status === 200) {
            this.animationList = res.data.data
            this.historyObj.total = res.data.totalCount
            if (this.animationList.length > 0) {
              this.getAnmanationList()
            }
          }
        })
      } else {
        this.title = '历史记录'
        this.showType = '2'
        this.getHistoryList()
      }
    },
    // 查询单个设置
    searchSingleSet () {
      getDicQuery({
        shopId: this.orgId,
        'dictKeys': 'swipeReadyPicture',
        'merchantId': this.$store.state.user.merchantId,
        'msType': '1'
      }).then(res => {
        if (res.data.status === 200) {
          if (res.data.data[0].swipeReadyPicture !== '0' || res.data.data[0].swipeReadyPicture !== 0) {
            this.animationList.forEach((ele, idx) => {
              if (ele.url === res.data.data[0].swipeReadyPicture) {
                this.checkedUrl = res.data.data[0].swipeReadyPicture
              }
            })
          }
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    drawerSetClose () {
      this.historyStatus = false
    },
    selectMaterial (data) {
      this.animationList.forEach((ele, idx) => {
        if (ele.url === data.url) {
          this.checkedUrl = data.url
        }
      })
    },
    skipSlit (argument) {
      this.$router.push({ name: 'animation_slit', query: { shopName: argument[0].orgName, shopId: argument[0].orgId, type: argument[1] } })
    },
    sureSet () {
      if (this.checkedUrl) {
        let arr = this.checkdList.map(item => {
          return item.id
        })
        setDicSave({
          msType: '1',
          merchantId: this.$store.state.user.merchantId,
          // swipeReadyPicture: this.md5 + '|' + this.checkedUrl,
          swipeReadyPicture: this.checkedUrl,
          shopIds: arr
        }).then(res => {
          if (res.data.status === 200) {
            this.setModalStatus = false
            this.$Message.success('设置成功！')
            this.getData()
          } else {
            this.$Message.error(`${res.data.error}`)
          }
        })
      } else {
        this.$Message.error('请选择一张待机动画图')
      }
    },
    // 批量设置 弹窗二  多门店动画列表
    gainAnimationList () {
      let param = {
        type: '',
        shopId: '',
        offset: this.animationObj.pageSize * (this.animationObj.pageIndex - 1),
        limit: this.animationObj.pageSize
      }
      this.awaitAnimationList(param)
    },
    // 单门店获取待机动画列表
    getAnmanationList () {
      let param = {
        type: '',
        shopId: this.orgId,
        offset: this.historyObj.pageSize * (this.historyObj.pageIndex - 1),
        limit: this.historyObj.pageSize
      }
      this.awaitAnimationList(param)
    },
    // 获取待机动画列表
    awaitAnimationList (data) {
      lookAnimationList(data).then(res => {
        if (res.data.status === 200) {
          this.animationList = res.data.data
          if (data.shopId) {
            this.historyObj.total = res.data.totalCount
          } else {
            this.animationObj.total = res.data.totalCount
          }
          if (this.animationList.length > 0) {
            this.animationList.forEach((ele, idx) => {
              if (!this.checkedUrl) {
                if (ele.setting === 1) {
                  this.checkedUrl = ele.url
                } else {
                  // if (data.shopId) {
                  //   if (ele.type === 0) {
                  //     this.checkedUrl = ele.url
                  //   }
                  // }
                }
              }
            })
          } else {
            this.$Message.error('暂无数据！')
          }
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    // 获取历史记录
    getHistoryList () {
      iterationHistoryList({
        merchantId: this.$store.state.user.merchantId,
        belongId: this.orgId,
        configKey: 'swipeReadyPicture',
        offset: this.historyObj.pageSize * (this.historyObj.pageIndex - 1),
        limit: this.historyObj.pageSize
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.tableHistoryData = result.data || []
          this.historyObj.total = result.totalCount || 0
        } else {
          this.$Message.error(`${result.error}`)
        }
      })
    },
    // 获取待机动画列表
    getData () {
      this.loading = true
      iterationAnimationList({
        merchantId: this.$store.state.user.merchantId,
        shopName: this.searchShopName,
        // shopId: this.serachShopId,
        offset: this.pageObj.pageSize * (this.pageObj.pageIndex - 1),
        limit: this.pageObj.pageSize
      }).then(res => {
        this.loading = false
        const result = res.data || {}
        if (result.status === 200) {
          this.tableData = result.data || []
          this.pageObj.total = result.totalCount || 0
        } else {
          this.$Message.error(`${result.error}`)
        }
      })
    }
  },
  mounted () {
    this.getData()
  }
}
</script>

<style lang='less'>
  #await-animation-set {
    .twice-modal-set {
      .ivu-modal-body {
        padding: 0;
      }
      .animation-set{
        display: flex;
        flex-wrap: wrap;
        height: 392px;
        overflow: auto;
        dd {
          position: relative;
          width: 180px;
          margin: 18px 0 18px 36px;
          .check-icon{
            position: absolute;
            top: 2px;
            right: 2px;
          }
          img {
            display: block;
            width: 180px;
            height: 120px;
          }
          .desc {
            text-align: center;
            background: #F8F8F9;
            line-height: 40px;
            height: 40px;
          }
        }
      }
    }
  }
</style>
